<template>
  <div class="similarity_box"> 
    <!-- 当前流程中相似数据弹出层 -->
    <a-modal v-model="isShowModal" width="1100px" :bodyStyle="{ height: '400px', overflow: 'auto' }"  title="相似数据" destroyOnClose>
      <a-form-model>
        <HEADERDEFINITION ref="headerDefRef" :ucolumns="ucolumns" @f_setColumns="s_setColumns" />
        <div class="headerdefBox">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>重置表格</span>
            </template>
            <img
              @click="resetting()"
              style="margin-right: 16px"
              src="@/assets/icons/table/table_refresh.png"
              alt="重置"
            />
          </a-tooltip>

          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>设置表格</span>
            </template>
            <img @click="showHeaderDef($event)" src="@/assets/icons/table/table_config.png" alt="表格设置" />
          </a-tooltip>
        </div>

        <!-- 表格数据 -->
        <a-table
          :scroll="{ x: 1000, y: 550 }"
          :columns="ucolumns"
          :data-source="listData"
          :loading="loading"
          rowKey="taskid"
          size="middle"
          :bordered="ubordered"
          :rowClassName="rowClassName"
          :pagination="false"
        >

          <div slot="applyidSlot" slot-scope="applyid" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ transLabel(applyid) }}</span>
              </template>
              <span>{{ transLabel(applyid) }}</span>
            </a-tooltip>
          </div>

          <div slot="statusSlot" slot-scope="status" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ transTypeLabel(status) }}</span>
              </template>
              <span>{{ transTypeLabel(status) }}</span>
            </a-tooltip>
          </div>


          <div slot="similarityRateSlot" slot-scope="similarityRate" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ similarityRate ? similarityRate + '%' : '---' }}</span>
              </template>
              <span style="font-weight: 800;color:#0072C6">{{ similarityRate ? similarityRate + '%' : '---' }}</span>
            </a-tooltip>
          </div>

          <div slot="acceptcodeSlot" slot-scope="acceptcode" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ acceptcode  }}</span>
              </template>
              {{ acceptcode }}
            </a-tooltip>
          </div>
          <div slot="applynameSlot" slot-scope="applyname" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ applyname  }}</span>
              </template>
              {{ applyname }}
            </a-tooltip>
          </div>
          <div slot="targetnameSlot" slot-scope="targetname" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ targetname }}</span>
              </template>
              {{ targetname }}
            </a-tooltip>
          </div>
          <div slot="reasonSlot" slot-scope="reason" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ reason }}</span>
              </template>
              {{ reason }}
            </a-tooltip>
          </div>
          <div slot="createtimeSlot" slot-scope="createtime" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ createtime }}</span>
              </template>
              {{ createtime }}
            </a-tooltip>
          </div>
        </a-table>
      </a-form-model>

      <div slot="footer" class="similarity_box_footer">
        <a-button class="cancle_button" @click="() => isShowModal=false"><span class="cancle_button_span">取消</span></a-button>
        <a-button class="ok_button" @click="() => isShowModal=false"><span class="ok_button_span">确定</span></a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getSimilarityReview } from '@/api/accept/apl_admreview.js'
import { St_admreviewKey } from '@/enumeration/St_admreview'
export default {
  props: {
    applyid: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isShowModal: false,
      ucolumns: [
        {
          title: '类别',
          dataIndex: 'applyid',
          key: 'applyid',
          width: 100,
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'applyidSlot' },
        },
        {
          title: '相似度(%)',
          dataIndex: 'similarityRate',
          key: 'similarityRate',
          width: 100,
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'similarityRateSlot' },
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          width: 100,
          align: 'left',
          scopedSlots: { customRender: 'statusSlot' },
        },
        {
          title: '案号',
          dataIndex: 'acceptcode',
          key: 'acceptcode',
          width: 200,
          align: 'left',
          scopedSlots: { customRender: 'acceptcodeSlot' },
        },
        {
          title: '申请人',
          dataIndex: 'applyname',
          key: 'applyname',
          width: 200,
          align: 'left',
          scopedSlots: { customRender: 'applynameSlot' },
        },
        {
          title: '被申请人',
          dataIndex: 'targetname',
          key: 'targetname',
          width: 200,
          align: 'left',
          scopedSlots: { customRender: 'targetnameSlot' },
        },
        {
          title: '录入人员',
          width: 100,
          key: 'regusername',
          dataIndex: 'regusername',
          align: 'left',
        },
        {
          title: '申请时间',
          dataIndex: 'createtime',
          key: 'createtime',
          width: 150,
          align: 'left',
          scopedSlots: { customRender: 'createtimeSlot' },
        },
        {
          title: '案由',
          dataIndex: 'reason',
          key: 'reason',
          width: 250,
          align: 'left',
          scopedSlots: { customRender: 'reasonSlot' },
        },
      ],
      listData: [],
      loading: false,
      ubordered: true, // 表格边框是否显示
      St_admreviewKey: St_admreviewKey,
      // applyid: 'eGbSOmQuUp3wlTG8OR7fn1693279514334'
    }
  },
  components: {
    HEADERDEFINITION: () => import('@/views/customComponents/headerDefinition.vue'),
  },
  created() {},
  methods: {
    // 重置表头方法
    resetting() {
      this.$refs.headerDefRef.f_resetting()
    },
    // 子组件回调函数, 重置表头
    s_setColumns(columns) {
      this.ucolumns = columns
    },
    // 显示自定义表头组件
    showHeaderDef(e) {
      this.$refs.headerDefRef.f_init(e)
    },
    rowClassName(record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },

    reloadModal() {
      this.loading = false
      this.querySimilarityData()
    },
    querySimilarityData() {
      this.loading = true
      getSimilarityReview({ applyid: this.applyid })
        .then((res) => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
            this.isShowModal = false
          } else {
            this.listData = res.data
            if (null != this.listData && this.listData.length > 1) {
              this.isShowModal = true
            } else {
              this.$message.warning('当前没有流程中的相似申请记录')
              this.isShowModal = false
            }
          }
        })
        .catch((err) => {
          this.listData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    transLabel(applyid) {
      if (applyid == this.applyid) {
        return '当前记录'
      } else {
        return '相似记录'
      }
    },
    transTypeLabel(status) {
      if (this.St_admreviewKey[status]) {
        return this.St_admreviewKey[status].name
      } 
      return '';
    }
  },
}
</script>
  
  
<style lang="less" scoped>

@import '~@/components/TableDrag/style.less';

.headerdefBox img {
  height: 20px;
  width: 20px;
}
.headerdefBox {
  // border: 1px solid red;
  margin: 0 20px 20px 0;
  display: flex;
  justify-content: end;
  
}

.collapseArea {
  border: none;
  .ant-collapse-item {
    border-bottom: none;
  }
  /deep/.ant-collapse-content {
    border-top: none;
  }
}
/deep/ .ant-collapse-header {
  background-color: #fff;
}
.collapseArea_header {
  .ant-form-item {
    margin-bottom: 0;
  }
}

.collapseArea_body {
  padding-top: 10px;
  padding: 0 20px 0 0px;
}


.overBox {
  width: 90%;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}

.similarity_box {

  
}
.similarity_box_footer {
  > span {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 800;
  }
  .cancle_button {
    width: 100px;
    margin-right: 20px;
    height: 34px;

    .cancle_button_span {
      font-size: 16px;
      font-family: "PingFang-SC-Heavy";
      font-weight: 800;
      color: #666666;
      letter-spacing: 0em;
      margin-right: 0em;

    }
  }

  .ok_button {
    width: 100px;
    background: #0072C6;
    height: 34px;
    
    .ok_button_span {
      font-size: 16px;
      font-family: "PingFang-SC-Heavy";
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: 0em;
      margin-right: 0em;
    }
  }
}


::v-deep .ant-modal-content {
  background: #FFFFFF;
  border-radius: 12px;
}
::v-deep .ant-modal-header {
  background: #F3F4F8;
  border-radius: 12px;
}
::v-deep .ant-modal-title {
  font-weight: 600;
  color: #2C2C2C;
  font-size: 16px;
}

::v-deep .ant-table-thead > tr > th {
  background: #F5F7FA;
  padding: 18px 12px;
}

::v-deep .ant-table-column-title {
  font-size: 15px;
  font-family: "PingFang-SC-Heavy";
  font-weight: 500;
  color: #666666
}

::v-deep .ant-table-tbody > tr > td {
  font-size: 14px;
  font-family: "PingFang-SC-Heavy";
  font-weight: 800;
  color: #2c2c2c;
  padding: 16px 12px !important;
  background: #F5F7FA;
}

::v-deep .ant-table-body,
.ant-table-header {
  word-break: break-all;
  &::-webkit-scrollbar {
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #A2C6E1;
  }
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: transparent;
  }
}

</style>
  